<!--
 * @Author: your name
 * @Date: 2020-10-05 11:45:02
 * @LastEditTime: 2020-10-05 16:20:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \longh_admin\src\views\Home\index.vue
-->
<!--  -->
<template>
  <!-- <page-header-wrapper> -->

  <div>

    <div class="flex">
      <div class="flex-1">
        <a-card :bordered="false">
          <div class="item_top_table">
            <p class="big_title">今日访问量</p>
            <countTo class="count_num" :startVal="startVal" :endVal="endVal" :duration="2000"></countTo>
            <div id="mychartVisits">

            </div>

            <div class="chart_tips">
              同比昨日增加 <span class="ml-20">12%</span>
              <a-icon class="icon_up" type="caret-up" />
            </div>
          </div>
        </a-card>
      </div>

      <div class="flex-1 ml-20">
        <a-card :bordered="false">
          <div class="item_top_table">
            <p class="big_title">今日页面浏览数</p>
            <countTo class="count_num" :startVal="startVal" :endVal="endVal" :duration="2000"></countTo>
            <div id="mychartViews">
            </div>
            <div class="chart_tips">
              同比昨日增加 <span class="ml-20">12%</span>
              <a-icon class="icon_up" type="caret-up" />
            </div>
          </div>
        </a-card>
      </div>
    </div>

    <a-card class="mt-40" :bordered="false">
      <div class="item_table">
        <p class="big_title">每月流量统计数</p>
        <div id="myChart">
        </div>
      </div>
    </a-card>
  </div>
  <!-- </page-header-wrapper> -->
</template>

<script>
import countTo from 'vue-count-to'
export default {
  data() {
    return {
      startVal: 0,
      endVal: 30000,
    }
  },

  components: { countTo },

  computed: {},

  mounted() {
    this.GetInitMap()
    this.GetmychartVisitsMap()
    this.GetmychartViewsMap()
  },

  methods: {
    GetmychartVisitsMap() {
      let myChart = this.$echarts.init(document.getElementById('mychartVisits'))
      const option = {
        legend: {
          left: 'center',
          data: [''],
        },
        color: ['#2a51bc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },

        xAxis: [
          {
            gridIndex: 0,
            show: false,
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            name: '',
            nameLocation: 'center',
            nameRotate: 360,
          },
        ],
        grid: [
          {
            top: '27%',
            left: '0%',
            height: '45%',
            width: '100%',
          },
        ],
        series: [
          {
            type: 'line',
            data: [411, 41, 302, 625, 53, 50, 544, 401, 30, 65, 53, 530],
            xAxisIndex: 0,
            yAxisIndex: 0,
            areaStyle: {
              color: ['#2a51bc'],
            },
          },
        ],
      }
      myChart.setOption(option)
    },

    GetmychartViewsMap() {
      let myChart = this.$echarts.init(document.getElementById('mychartViews'))
      const option = {
        legend: {
          left: 'center',
          data: [''],
        },
        color: ['#8543f4'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },

        xAxis: [
          {
            gridIndex: 0,
            show: false,
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            name: '',
            nameLocation: 'center',
            nameRotate: 360,
          },
        ],
        grid: [
          {
            top: '27%',
            left: '0%',
            height: '45%',
            width: '100%',
          },
        ],
        series: [
          {
            type: 'line',
            data: [411, 41, 302, 625, 53, 50, 544, 401, 30, 65, 53, 530],
            xAxisIndex: 0,
            yAxisIndex: 0,
            areaStyle: {
              color: ['#8543f4'],
            },
          },
        ],
      }
      myChart.setOption(option)
    },

    GetInitMap() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      const option = {
        backgroundColor: '#fff',
        title: {
          text: '2020年统计量',
          left: '18px',
          top: '0',
          textStyle: {
            color: '#999',
            fontSize: 14,
            fontWeight: '400',
          },
        },
        color: ['#2cd9c5', '#2a51bc', '#3464e0'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#bac4d5',
            },
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        grid: {
          left: '25',
          right: '25',
          bottom: '24',
          top: '75',
          containLabel: true,
        },
        legend: {
          data: ['访问量', '页面浏览数'],
          orient: 'horizontal',
          icon: 'rect',
          show: true,
          left: 20,
          top: 25,
        },
        xAxis: {
          type: 'category',
          data: [
            '2019-01',
            '2019-02',
            '2019-03',
            '2019-04',
            '2019-05',
            '2019-06',
            '2019-07',
            '2019-08',
            '2019-09',
            '2019-010',
            '2019-11',
            '2019-12',
          ],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          // max: max_value>=100? max_value + 100: max_value+10,
          // max: max_value > 100 ? max_value * 2 : max_value + 10,
          // interval: 10,
          // nameLocation: "center",
          axisLabel: {
            color: '#999',
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F3F4F4',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            smooth: true,
            data: [1311, 1, 4, 44, 45, 322, 76, 13, 1, 4, 44, 45, 322, 76],
          },
          {
            name: '页面浏览数',
            type: 'line',
            smooth: true,
            data: [13, 54, 34, 344, 35, 53, 13, 1, 4, 44, 45, 322, 76],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  created() {},
}
</script>
<style lang='less' scoped>
.item_top_table {
  font-size: 16px;
  color: #606266;

  .count_num {
    font-size: 30px;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.85);
  }
}
.item_table {
  .big_title {
    font-size: 22px;
    color: #303133;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9e9e9;
  }
  .table_list {
    margin-top: 24px;
    .tags {
      width: 14px;
      height: 14px;
      background-color: #e9284f;
      border-radius: 100%;
      display: inline-block;
      margin-left: 10px;
    }
  }
  .qiye_icon {
    background-color: #0860b6;
    color: #fff;
  }
  .iconfont {
    border-radius: 100%;
    font-size: 32px;
    text-align: center;
    line-height: 64px;
    margin-right: 16px;
    margin-left: 40px;
    width: 64px;
    height: 64px;
  }
  .gongxu_icon {
    background-color: #00b7c2;
    color: #fff;
  }
  .xuqiu_icon {
    background-color: #0860b6;
    color: #fff;
  }
  .tips_title {
    font-size: 16px;
    color: #303133;
  }

  .count_num {
    font-size: 36px;
    color: #303133;
  }

  .unit {
    font-size: 14px;
    color: #909399;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

#myChart {
  width: 100%;
  height: 465px;
  background-color: #ddd;
  margin-top: 20px;
}

#mychartVisits {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-top: 20px;
  padding-bottom: 20px;
}

#mychartViews {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-top: 20px;
}

.chart_tips {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  border-top: 1px solid #e8e8e8;
  padding: 10px 0;
  .icon_up {
    font-size: 16px;
    color: #f5222d;
  }
}
</style>